/* src/styles/variables.css */

/* —— 浅色主题 —— */
:root,
:root[data-theme='light'],
html[data-theme='light'] {
  /* 品牌与语义色 */
  --brand: #3b82f6;            /* 主色（克制的蓝） */
  --brand-600: #2563eb;
  --brand-50:  #eff6ff;
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #64748b;

  /* 中性色 */
  --bg-app:    #f6f7fb;
  --bg-card:   #ffffff;
  --bd-card:   #e8edf3;
  --txt-1:     #0f172a;  /* 强调标题 */
  --txt-2:     #334155;  /* 正文 */
  --txt-3:     #64748b;  /* 次要 */
  --muted:     #94a3b8;

  /* 组件态色（Element Plus 适配） */
  --el-color-primary: var(--brand);
  --el-color-primary-dark-2: var(--brand-600);
  --el-color-success: var(--success);
  --el-color-warning: var(--warning);
  --el-color-danger:  var(--danger);
  --el-color-info:    var(--info);

  /* 尺寸与圆角/阴影 */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --shadow-s: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-m: 0 8px 24px rgba(15, 23, 42, 0.08);

  /* 组件专用 */
  --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1;
  --sidebar-active-text: #ffffff;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-active: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --header-bg: #ffffff;
  --header-bd: #e8edf3;

  /* 标签（TagsView） */
  --tag-bg: #fff;
  --tag-bd: #e5e9f0;
  --tag-txt: #475569;
  --tag-active-bg: var(--brand);
  --tag-active-txt: #fff;

  /* 统计卡片专用 */
  --stat-icon-bg: #eef2ff;
  --stat-progress: #e6eefb;

  /* 图表 */
  --chart-line: #3b82f6;
  --chart-area: rgba(59,130,246,0.12);
  --chart-grid: #eef2f7;

  /* 滚动条 */
  --scrollbar-track: #eef2f7;
  --scrollbar-thumb: #c7cfda;
  --scrollbar-thumb-hover: #aab6c5;
}

/* —— 深色主题 —— */
:root[data-theme='dark'],
html[data-theme='dark'] {
  --brand: #60a5fa;
  --brand-600: #3b82f6;
  --brand-50: #0b1220;

  --bg-app:  #0b0f16;
  --bg-card: #111827;
  --bd-card: #1f2734;
  --txt-1:   #e5e7eb;
  --txt-2:   #cbd5e1;
  --txt-3:   #94a3b8;
  --muted:   #7c8aa0;

  --el-color-primary: var(--brand);
  --el-color-primary-dark-2: var(--brand-600);

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --shadow-s: 0 2px 10px rgba(2, 6, 23, 0.5);
  --shadow-m: 0 8px 24px rgba(2, 6, 23, 0.45);

  --sidebar-bg: #0b1020;
  --sidebar-text: #cbd5e1;
  --sidebar-active-text: #ffffff;
  --sidebar-hover: rgba(96,165,250,0.08);
  --sidebar-active: linear-gradient(135deg, #60a5fa 0%, #7c3aed 100%);
  --header-bg: #0f172a;
  --header-bd: #1e293b;

  --tag-bg: #0f172a;
  --tag-bd: #203047;
  --tag-txt: #e2e8f0;
  --tag-active-bg: var(--brand);
  --tag-active-txt: #0b0f16;

  --stat-icon-bg: #0b1220;
  --stat-progress: #1c2432;

  --chart-line: #60a5fa;
  --chart-area: rgba(96,165,250,0.15);
  --chart-grid: #1d2634;

  --scrollbar-track: #101827;
  --scrollbar-thumb: #374151;
  --scrollbar-thumb-hover: #4b5563;
}